import { MenuDataItem, getMenuData, getPageTitle } from '@ant-design/pro-layout';
import DocumentTitle from 'react-document-title';
import Link from 'umi/link';
import React from 'react';
import { connect } from 'dva';
import { formatMessage } from 'umi-plugin-react/locale';

import GlobalFooter from '@/components/GlobalFooter';
import SelectLang from '@/components/SelectLang';
import { ConnectProps, ConnectState } from '@/models/connect';
import logo from '../assets/logo.png';
import styles from './UserLayout.less';

export interface UserLayoutProps extends ConnectProps {
    breadcrumbNameMap: { [path: string]: MenuDataItem };
}

const UserLayout: React.SFC<UserLayoutProps> = props => {
    const {
        route = {
            routes: []
        }
    } = props;
    const { routes = [] } = route;
    const {
        children,
        location = {
            pathname: ''
        }
    } = props;
    const { breadcrumb } = getMenuData(routes);

    return (
        <DocumentTitle
            title={getPageTitle({
                pathname: location.pathname,
                breadcrumb,
                formatMessage,
                ...props
            })}
        >
            <div className={styles.container}>
                <div className={styles.lang}>
                    <SelectLang />
                </div>
                <div className={styles.content}>
                    <div className={styles.top}>
                        <div className={styles.header}>
                            <Link to="/">
                                <img alt="logo" className={styles.logo} src={logo} />
                                <span className={styles.title}>大地人本</span>
                            </Link>
                        </div>
                        <div className={styles.desc}>V TECH V LIFE TRANSFORMING LIVES WITH DATA</div>
                    </div>
                    {children}
                </div>
                <GlobalFooter />
                <div style={{ display: 'none' }}>version: cs 1.5 2020-3-30 14:45:08</div>
            </div>
        </DocumentTitle>
    );
};

export default connect(({ settings }: ConnectState) => ({
    ...settings
}))(UserLayout);
